<template>
  <!--   <div class="now"> -->
  <ul class="icons">
    <li
      v-for='(item,index) in iconsList'
      :key='index'
    >
      <!-- iconsList  -->
      <img
        :src="item.imgUrl"
        :alt="item.imgUrl"
      >
      <span>{{item.title}}</span>
    </li>
  </ul>
  <!--   </div> -->
</template>



<script>
export default {
  //name: "icons",
  props: {
    iconsList: Array,
  },
  data() {
    return {
      //父组件传值给子组件 用的是props
      //iconsList: [
      //{
      //id: 1,
      //title: "1" /*./是指public */,
      //imgUrl: "./images/icons1.png",
      //},
      //{
      //id: 2,
      //title: "2" /*./是指public */,
      //imgUrl: "./images/icons2.png",
      //},
      //{
      //id: 3,
      //title: "3" /*./是指public */,
      //imgUrl: "./images/icons3.png",
      //},
      //{
      //id: 4,
      //title: "4" /*./是指public */,
      //imgUrl: "./images/icons4.png",
      //},
      //{
      //id: 5,
      //title: "5" /*./是指public */,
      //imgUrl: "./images/icons5.png",
      //},
      //],
    };
  },
};
</script>
<style scoped>
.now {
  width: 100%;
  /*   height: -20px;
  padding: 265px 3px 0px 3px;  这个布局不行 要用flex布局*/
  border: none;
  background-color: red; /*  */
}
.icons {
  background-color: red;
  top: 100px;
  display: flex;
  justify-content: space-around;
  padding: 8px 0px 3px 0px;
}
.icons li {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直显示 */
  align-items: center; /*将弹性 <div> 元素的所有项目的居中对齐 */
}
.icons img {
  /*   display: inline-block; */
  top: 100px;
  width: 38px;
  height: 38px;
}
.icons span {
  /*   display: inline-block; */
  padding: 3px 0px; /** span文字*/
  font-size: 16px;
}
</style>